<template>
    <div class="navbar">
        <!--  
            这里使用的是ElementUI中的导航菜单

            default-active:默认选中的菜单，这里表示根据路由地址选择

            :router="true"注意！true表示开启路由模式,开启之后, index值代表的就是路由地址
            默认如果不开启没有路由功能！！！这里触发的路由组件显示在AppMain/index.vue组件中的<router-line>中
        
            text-color:表示导航文本颜色
            active-text-color:表示当光标点击后的颜色
        -->
        <el-menu :router="true" :default-active="$route.path" class="el-menu-vertical-demo"
        background-color="#545c64" text-color="#fff" active-text-color="coral">
            <!-- 
                此元素表示每个导航列表项 index在开启路由后表示路由地址
            -->
            <el-menu-item index="/home">
                <!-- class属性对应element-ui中的图标类名 -->
                <i class="el-icon-s-home"></i>
                <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item index="/member/">
                <i class="el-icon-user-solid"></i>
                <span slot="title">房源管理</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>
    /* 表示去除导航右侧的一条白线 */
    .el-menu {
        border-right: none;
    }
</style>